showAction<!-- 视图层 -->
<template>
	<view class="content">
		<view class="top1">
			<h2>小黑记事本</h2>
		</view>
		<view class="main">
			<view class="top">
				<view class="search">
					<view class="left">
						<u-search borderColor="#f60" bgColor="#ffffff" height="45px" :showAction="false" shape="square"
							placeholder="请输入任务" v-model="todoName"></u-search>
					</view>
					<view class="right">
						<button class="btn" @click="add">添加</button>
					</view>
				</view>
			</view>
			<view class="center">
				<view class="row" v-for="(item,index) in list" :key="index">
					<span>
						{{ item.name }}
					</span>
					<span @click="del(item.id)">
						单个删除
					</span>
				</view>
				
			</view>
			<view class="bottom">
				<view class="left">
					合计：{{ list.length }}
				</view>
				<view class="right" @click="clear">
					清空任务
				</view>
			</view>
		</view>
	</view>
</template>
<!-- js 数据层 -->
<script>
export default {
	data() {
		return {
			todoName:"",
			list:[
				{
					id:1,
					name:"1、跑步一公里"
				},
				{
					id:2,
					name:"2、跑步两公里"
				},
				{
					id:3,
					name:"3、跑步三公里"
				},
				{
					id:4,
					name:"4、跑步四公里"
				},
				{
					id:5,
					name:"5、跑步五公里"
				},
				
			]
		}
	},
	methods:{
        del (id){
          this.list = this.list.filter(item => item.id !== id)
        },
        add (){
          if(this.todoName.trim() ===''){
            alert('请输入任务内容')
            return
          }
          this.list.unshift({
            id: +new Date(),
            name:this.todoName
          })
          this.todoName=''
        },
        clear() {
          this.list=[]
        }
      }
}
</script>
<!-- 样式 -->
<style lang="scss">
.content {
	padding: 10px;
	width: 98%;
	background: #f3f4f6;

	margin: 0 auto;
	// border: 1px solid #000;
	height: 600px;

	.top1 {
		width: 98%;
		text-align: center;
		height: 35px;
		background: #ffffff;
		// border: 1px solid #000;
	}

	.main {
		width: 98%;
		margin-top: 30px;
		height: 300px;
		border-radius: 10px;
		// border: 1px solid blue;
		background: #ffffff;
		box-shadow: 
    0 0 0 1px #ccc, /* 外部细线阴影（模拟边框） */
    0 4px 6px rgba(0, 0.5, 0, 0.5); /* 外部阴影 */

		.top {
			// margin-top: 20px;
			.search {
				margin-top: 10px;
				display: flex;
				padding-top: 15px;

				justify-content: center; //垂直居中
				align-content: center; //水平 居中


				.left {
					// border: 1px solid #000;
					height: 42px;
					border-top-left-radius: 10px;
					border-bottom-left-radius: 10px;

					width: 68%;
				}

				.right {
					width: 28%;
					height: 35px;

					.btn {
						background: #f60;
						color: #ffffff;
						border-top-left-radius:0px ;
						border-bottom-left-radius:0px ;

					}
				}
			}
		}
		.center{
			padding: 10px;
			.row{
				padding-bottom: 15px;
				color: #999999;
				border-bottom:  1px solid #eeeeee;
			}
			.row:nth-child(1)
			{
				margin-top: 10px;
			}
		}
		.bottom{
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #999999;
			.left{
				margin-left: 12px
			}
			.right{
				margin-right: 12px
			}
		}
		

	}
}
</style>